<template>
  <view class="loading">
    <image
      class="loading-icon"
      src="@/static/images/common/loading.png"
    ></image>
    <view class="loading-textBg">
      <view class="loading-textBg-text"> {{ loadingText }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";

const loadingTextType = ref(3);
const timer = ref();

const loadingTextTypeInterval = () => {
  if (loadingTextType.value === 1) {
    loadingTextType.value = 2;
  } else if (loadingTextType.value === 2) {
    loadingTextType.value = 3;
  } else if (loadingTextType.value === 3) {
    loadingTextType.value = 1;
  }
};

const loadingText = computed(() => {
  if (loadingTextType.value === 1) {
    return "加载中.";
  } else if (loadingTextType.value === 2) {
    return "加载中..";
  } else if (loadingTextType.value === 3) {
    return "加载中...";
  }
});

onMounted(() => {
  timer.value = setInterval(loadingTextTypeInterval, 500);
});

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 160rpx;
  height: 160rpx;
  background: rgba(17, 17, 17, 0.7);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  &-icon {
    width: 64rpx;
    height: 64rpx;
  }
  &-textBg {
    padding-top: 20rpx;
    margin-left: 2rpx;
    width: 108rpx;
    &-text {
      font-size: 28rpx;
      color: #ffffff;
      line-height: 34rpx;
    }
  }
}
</style>
